<!--
 * @Descripttion: 
 * @version: @ 1.0.0
 * @Author: 朱江洲
 * @Date: 2021-11-22 13:53:41
 * @LastEditors: 朱江洲
 * @LastEditTime: 2022-05-07 09:59:05
-->
<template>
  <div>
    <el-table :data="recordData">
      <el-table-column label="申请时间" prop="createTime"> </el-table-column>
      <el-table-column label="开票金额" prop="total"> </el-table-column>
      <el-table-column label="发票类型" prop="">
        <template slot-scope="scope">
          {{ scope.row.invoiceType | invType }}
        </template>
      </el-table-column>
      <el-table-column label="发票抬头" prop="titleType">
        <template slot-scope="scope">
          {{ scope.row.titleType == 1 ? "个人" : "公司" }}
        </template>
      </el-table-column>
      <el-table-column label="发票状态">
        <template slot-scope="scope">
          {{ scope.row.status | status }}
        </template>
      </el-table-column>
      <el-table-column label="操作">
        <template slot-scope="scope">
          <span @click="detail(scope.row)">详情</span>
          <a :href="scope.row.url" v-if="scope.row.url !== null"> 下载 </a>
        </template>
      </el-table-column>
    </el-table>
    <!-- 分页器 -->
    <el-pagination
      prev-text="上一页"
      next-text="下一页"
      background
      :page-size="pageSize"
      :page-sizes="[10, 20, 30, 40, 50, 100]"
      @size-change="handleSizeChange"
      @current-change="handleCurrentChange"
      :current-page="pageNum"
      layout=" ->,total,sizes, prev, pager, next, jumper "
      :total="total"
    >
    </el-pagination>
    <el-dialog title="开票详情" :visible.sync="detailShow" width="50%">
      <div class="basics">基础信息</div>

      <el-form :model="detailForm" ref="detailForm" label-width="100px">
        <el-form-item label="提交时间：">
          {{ detailForm.createTime }}
        </el-form-item>
        <el-form-item label="发票状态：">
          {{ detailForm.status | status }}
        </el-form-item>
        <el-form-item label="开票类型：">
          {{ detailForm.titleType | comType }}
        </el-form-item>
        <el-form-item label="发票类型：">
          {{ detailForm.invoiceType | invType }}
        </el-form-item>
        <el-form-item label="发票内容：">
          {{ detailForm.content | content }}
        </el-form-item>
        <el-form-item label="发票金额：">
          {{ detailForm.total }}
        </el-form-item>
        <el-form-item label="发票抬头：">
          {{ detailForm.title }}
        </el-form-item>
        <el-form-item label="下载链接：">
          <a :href="detailForm.url" v-if="detailForm.url">下载发票</a>
        </el-form-item>
        <el-form-item label="收件地址：">
          {{ detailForm.address }}
        </el-form-item>
      </el-form>

      <div class="basics">开票订单</div>
      <el-form :model="detailForm" ref="detailForm" label-width="100px">
        <el-form-item label="订单编号：">
          {{ detailForm.orderNumber }}
        </el-form-item>
        <el-form-item label="订单时间：">
          {{ detailForm.orderTime }}
        </el-form-item>
        <el-form-item label="订单内容：">
          {{ detailForm.examName }}
        </el-form-item>
        <el-form-item label="订单金额：">
          {{ detailForm.total }}
        </el-form-item>
        <el-form-item label="支付方式：">
          {{ detailForm.paymentType | payType }}
        </el-form-item>
      </el-form>
    </el-dialog>
  </div>
</template>

<script>
import { billRecordList, invoiceInfo } from "@/api/enterprise/invoiceAst";
export default {
  filters: {
    status: function (value) {
      if (value == 1) {
        value = "开具中";
      } else if (value == 2) {
        value = "已开具电子发票";
      } else {
        value = "已开具纸质发票";
      }
      return value;
    },
    content: function (val) {
      if (val == 1) {
        val = "咨询费";
      } else {
        val = "报名费";
      }
      return val;
    },
    comType: function (val) {
      if (val == 1) {
        val = "个人";
      } else {
        val = "公司";
      }
      return val;
    },
    invType: function (val) {
      if (val == 1) {
        val = "电子发票";
      } else {
        val = "纸质发票";
      }
      return val;
    },
    payType: function (val) {
      if (val == 1) {
        val = "微信支付";
      } else if (val == 2) {
        val = "支付宝支付";
      } else {
        val = "线下支付";
      }
      return val;
    },
  },
  data() {
    return {
      detailForm: {},
      recordData: [],
      pageSize: 10,
      pageNum: 1,
      total: 0,
      detailShow: false,
    };
  },
  created() {
    this.getList();
  },
  methods: {
    //   获取列表
    getList() {
      billRecordList({
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        identification: this.input,
      }).then((res) => {
        this.recordData = res.rows;
        this.total = res.total;
      });
    },
    //   详情
    detail(row) {
      this.detailShow = true;
      invoiceInfo({ id: row.id }).then((res) => {
        this.detailForm = res.data;
        console.log(res);
      });
    },
    // 下载
    downLoad(row) {},
    // 分页器
      handleSizeChange(val) {
      this.pageSize = val;
      this.pageNum = 1;
      this.getList();
    },
    handleCurrentChange(val) {
      this.pageNum = val;
      this.getList();
    },
  },
};
</script>

<style lang="less" scoped>
.el-pagination {
  margin-top: 24px;
  /deep/ .el-pagination__total {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
    margin-right: 25px;
  }
  /deep/ .btn-prev {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .btn-next {
    width: 80px;
    height: 40px;
    text-align: center;
  }
  /deep/ .number {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-input__inner {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .more {
    width: 40px;
    height: 40px;
    line-height: 40px;
    text-align: center;
  }
  /deep/ .el-pagination__jump {
    .el-input__inner {
      width: 40px;
      height: 40px;
    }
  }
}
.cell {
  span {
    margin-right: 10px;
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1259fa;
  }
  a {
    font-size: 14px;
    font-family: PingFangSC-Regular, PingFang SC;
    font-weight: 400;
    color: #1259fa;
  }
}
.el-form {
  display: flex;
  flex-wrap: wrap;
  .el-form-item {
    width: 50%;
  }
}
.basics {
  position: relative;
  font-size: 14px;
}
.basics::before {
  content: "";
  position: absolute;
  left: -6px;
  top: 0px;
  width: 3px;
  height: 14px;
  background: #1267fa;
}
</style>